<template>
  <!-- 设备管理 -->
  <view class="content">
    <!-- 筛选条件 -->
    <view class="box-select flex flex-y-center bg-white">
      <zb-dropdown-menu active-color="#1989fa" :catchtouchmove="true">
        <zb-dropdown-item :options="state.networkOptions" v-model="state.param.networkId" @change="e => onChange(e, 'networkId')" placeholder="网点"></zb-dropdown-item>
        <zb-dropdown-item
          :options="state.equipmentStatusOptions"
          v-model="state.param.equipmentStatus"
          @change="e => onChange(e, 'equipmentStatus')"
          placeholder="设备状态"
        ></zb-dropdown-item>
        <zb-dropdown-item
          :options="state.businessStatusOptions"
          v-model="state.param.businessStatus"
          @change="e => onChange(e, 'businessStatus')"
          placeholder="在线状态"
        ></zb-dropdown-item>
      </zb-dropdown-menu>
    </view>

    <!-- 设备列表 -->
    <view class="list">
      <view class="item bg-white" v-for="item in state.dataSource" :key="item.id" @click="$jump.navigateTo(`/pages/device/details?deviceId=${item.deviceId}&id=${item.id}`)">
        <view class="flex flex-y-center fz28 gray3">
          <view class="flex1">{{ `${item.networkName}-${item.deviceName}` }}</view>
          <view class="ml10">{{ $filter.filterDictText(state.deviceTypeOptions, item.deviceType) }}</view>
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1">主板ID：{{ item.mainboardId }}</view>
          <view>
            <text class="ml10" :class="$filter.filterDictText(state.equipmentStatusOptions, item.equipmentStatus) === '营业' ? 'blue' : ''">
              {{ $filter.filterDictText(state.equipmentStatusOptions, item.equipmentStatus) }}
            </text>
          </view>
        </view>
        <view class="flex flex-y-center fz26 gray9">
          <view class="flex1">短编号：{{ item.networkId }}</view>
          <view>
            <text class="ml10" :class="$filter.filterDictText(state.businessStatusOptions, item.businessStatus) === '在线' ? 'green' : ''">
              {{ $filter.filterDictText(state.businessStatusOptions, item.businessStatus) }}
            </text>
          </view>
        </view>
        <view class="gray9 fz26">柜子数量：{{ item.cellNum }}</view>
        <view class="gray9 fz26">设备位置：{{ item.provinceCn }}{{ item.cityCn }}{{ item.areaCn }}{{ item.streetCn }}</view>
      </view>
    </view>

    <uni-load-more :status="mix.loading"></uni-load-more>
  </view>
</template>

<script setup>
import minix from '@/common/js/mixin.js';
import { reactive, getCurrentInstance } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getDeviceList, initDictOptions, getNetworkOptions } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const { mix } = minix();
const state = reactive({
  firstLoad: true,
  param: {
    networkId: '',
    equipmentStatus: '',
    businessStatus: '',
    column: 'businessId'
  },
  dataSource: [],
  deviceTypeOptions: [],
  networkOptions: [{ value: '', text: '全部', title: 'title1' }],
  equipmentStatusOptions: [{ value: '', text: '全部', title: 'title2' }],
  businessStatusOptions: [{ value: '', text: '全部', title: 'title3' }]
});

// 获取数据
const loadData = page => {
  if (mix.isSend) {
    return;
  }
  mix.isSend = true;
  mix.loading = 'loading';
  if (page >= 0) {
    mix.query.pageNo = page;
  }
  if (page === 1) {
    state.dataSource = [];
  }
  const data = { ...mix.query, ...state.param };
  getDeviceList(data)
    .then(res => {
      state.dataSource = state.dataSource.concat(res.result.records);
      mix.query.pageNo++;
      if (!res.result.records || res.result.records.length < mix.query.pageSize) {
        mix.loading = 'noMore';
      } else {
        mix.loading = 'more';
      }
    })
    .finally(() => {
      mix.isSend = false;
      uni.stopPullDownRefresh();
      setTimeout(() => {
        state.firstLoad = false;
      }, 1000);
    });
};

// 初始化数据字典
const initDictConfig = () => {
  //初始化字典 - 设备类型
  initDictOptions('deviceType', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.deviceTypeOptions = res.result;
    }
  });
  //初始化字典 - 设备状态
  initDictOptions('equipmentStatus', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.equipmentStatusOptions = [...state.equipmentStatusOptions, ...res.result];
    }
  });
  //初始化字典 - 在线状态
  initDictOptions('businessStatus', {}, { showLoad: false }).then(res => {
    if (res.success) {
      state.businessStatusOptions = [...state.businessStatusOptions, ...res.result];
    }
  });

  // 获取网点列表
  getNetworkOptions().then(res => {
    const arr = res.result.map(item => {
      const obj = {
        value: item.id,
        text: item.networkName
      };
      return obj;
    });
    state.networkOptions = [...state.networkOptions, ...arr];
  });
};

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  initDictConfig();
  loadData();
});

// 页面滚动到底部
onReachBottom(() => {
  if (mix.loading === 'noMore') return;
  loadData();
});

// 下拉刷新
onPullDownRefresh(() => {
  loadData(1);
});

const onChange = (e, key) => {
  state.param[key] = e.value;
  // 延迟防止参数没变
  setTimeout(() => {
    loadData(1);
  }, 100);
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.list {
  padding: 0 20rpx;
  .item {
    padding: 30rpx;
    margin: 20rpx 0;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 10rpx rgba(#000, 0.1);
    line-height: 2;
  }
}

.box-select {
  padding: 0 10rpx;
  .item {
    padding: 0 10rpx;
  }
  :deep(.uni-select) {
    justify-content: center;
    border: none;
    .uni-select__input-placeholder {
      width: auto;
      margin-right: 5rpx;
    }
    .uni-select__input-box {
      flex: 0;
    }
  }
}
</style>
